<template>
  <div class="login-box">
    <div class="enter">
      <div>
        <input type="text" v-model="username" placeholder="手机号码" />
        <p class="hint" v-if="userflag">请输入正确11位的手机号码！</p>
      </div>
      <div v-if="codeflag">
        <input type="password" v-model="password" placeholder="密码" />
        <p class="hint" v-if="pasflag">请输入8-16位密码</p>
      </div>
      <div v-else>
        <input
          class="codeinput"
          type="text"
          v-model="pas"
          placeholder="请输入验证码"
        />
        <p class="getcode">获取验证码</p>
      </div>
    </div>
    <div
      class="btn"
      :class="[btnflag ? 'btn-t' : 'btn-f']"
      @click="btnflag && onLogin({ username, password })"
    >
      登录
    </div>
    <div class="sign">
      还没有账号？立即 <span @click="goregister">注册</span>
    </div>
    <div class="code">
      <span @click="oncode">{{ title }}</span
      ><span>找回密码</span>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, watch } from "vue";
import router from "@/router";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      userflag: false,
      pasflag: false,
      btnflag: false,
      codeflag: true,
      title: "验证码登录",
    });
    const username = ref("");
    const password = ref("");
    watch(username, (username) => {
      const userReg =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      if (username.search(userReg) && !(username == "")) {
        state.userflag = true;
      } else {
        state.userflag = false;
      }
    });
    watch(password, (password) => {
      const pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (password.search(pwdReg) && !(password == "")) {
        state.pasflag = true;
      } else {
        state.pasflag = false;
      }
    });
    watch(state, (newflag) => {
      if (
        !newflag.pasflag &&
        !newflag.userflag &&
        password.value != "" &&
        username.value != ""
      ) {
        state.btnflag = true;
      } else {
        state.btnflag = false;
      }
    });
    const onLogin = (values: { username: string; password: string }) => {
      store.dispatch({
        type: "user/getLogin",
        values,
      });
    };
    return {
      ...toRefs(state),
      username,
      password,
      onLogin,
      oncode() {
        const arr = ["验证码登录", "密码登录"];
        state.codeflag = !state.codeflag;
        state.title = arr[Number(!state.codeflag)];
      },
      goregister() {
        router.push("/register");
      },
    };
  },
});
</script>
<style lang="stylus" scoped>
@import '../../assets/style/border.styl';
  *
    padding 0
    margin 0
  .login-box
    display flex
    flex-direction column
    height 100%
    justify-content center
    font-size .2rem
  .enter
    display flex
    flex-direction column
    font-size .13rem
    div
      margin 0 .15rem .3rem
      padding .12rem 0
      position relative
      border 0 0 1px 0,#666
      display flex
      justify-content flex-end
      .hint
        position absolute
        top .5rem
        left 0
        color #ff4685
      .getcode
        color: #666;
        padding: 0 0.1rem;
        font-size: 0.12rem;
        white-space: nowrap;
        border: 1px,#a6a6a6,solid,1rem;
      input
        width 90%
        border-width 0
        outline none
        font-size .14rem
      .codeinput
        width 67%
  .btn
    color #fff
    margin .05rem
    border-radius 1rem
    text-align center
    font-size 0.18rem
    height 0.5rem
    line-height 0.5rem
  .btn-t
    background: linear-gradient(270deg,#fbaa58 0,#fa4dbe);
  .btn-f
    background-color #ddd
  .sign
    font-size .15rem
    margin 0.03rem 0.15rem
    color #888
    span
      color #1991eb
  .code
    display flex
    justify-content center
    padding-top 1rem
    span
      margin .2rem
      font-size .15rem
      color  #aaa
</style>
